<template>
  <div class="xf-multi">
    <xf-input
      ref="input"
      :placeholder="placeholder"
      :value="inputVal"
      readonly
      :valid="valid"
      :show-icon="showIcon"
      @click.native="handleShow"
      :show-clear-icon="false"></xf-input>
    <yd-cityselect
      v-model="show"
      :callback="handleSubmit"
      :ready="ready"
      :choose-title="chooseTitle"
      :title="title"
      :items="list"></yd-cityselect>
  </div>
</template>
<script>
  import XfInput from '../xf-input/xf-input.vue'

  export default {
    name: 'xf-multi',
    props: {
      valid: {type: null},
      placeholder: {type: String, default: ''},
      value: {type: null, default: ''},
      list: {type: Array, default: () => []},
      columns: {type: Number, default: 2},
      showIcon: {type: Boolean, default: true},
      chooseTitle: {type: String, default: '请选择'},
      title: {type: String, default: ''},
      full: {type: Boolean, default: true},
      nameVal: {type: String, default: ''},
      bt: {type: null, default: ''},
      btName: {type: null, default: ''}
    },
    components: {XfInput},
    data() {
      return {
        ready: false,
        show: false,
        inputVal: ''
      }
    },
    methods: {
      handleSubmit(val, val2) {
        /*
        * {
            itemName1: "", //选择后【省】的名称
            itemName2: "", //选择后【市】的名称
            itemName3: "", //选择后【县】的名称
            itemValue1: "", //选择后【省】的值
            itemValue2: "", //选择后【市】的值
            itemValue3: "" //选择后【县】的值
          }
        * */
        const names = []
        if (val.itemName1) names.push(val.itemName1)
        if (val.itemName2) names.push(val.itemName2)
        if (val.itemName3) names.push(val.itemName3)
        if (this.full) {
          this.inputVal = names.join(' ')
        } else {
          this.inputVal = names[names.length - 1]
        }
        const value = val.itemValue3 || val.itemValue2 || val.itemValue1
        this.$emit('input', value)
        this.handleBT(value)
        this.$emit('update:nameVal', this.inputVal)
      },
      handleReady(list) {
        this.ready = !!list.length
      },
      handleShow() {
        this.show = true
      },
      validValue() {
        return this.$refs.input.validValue()
      },
      backShow(val) {
        if (!val) return
        this.inputVal = val
      },
      handleBT(value) {
        if (!value) return
        this.btItem = ''
        this.deepSearch(this.list, value)
        if (this.btItem) {
          this.$emit('update:bt', this.btItem.bt)
          this.$emit('update:btName', this.btItem.btName)
        }
      },
      deepSearch(list, value) {
        list.forEach(item => {
          if (item.v === value) {
            this.btItem = item
          } else if (item.c.length) {
            this.deepSearch(item.c, value)
          }
        })
      }
    },
    created() {
      this.handleReady(this.list)
      this.$watch('list', this.handleReady)
      this.$watch('nameVal', this.backShow)
      this.backShow(this.nameVal)
    }
  }
</script>
<style lang="scss" scoped>
  .xf-multi {
    width: 100%;
  }
</style>
